import React, { Component } from 'react';
import styles from './index.less';
import { Input, message, Button, Popover, Icon, Row, Col } from 'antd';
import Ellipsis from '@/components/Ellipsis';

const KEYCOMPARE = [
  { value: '>=', type: 'brackets' },
  { value: '<=', type: 'brackets' },
  { value: '>', type: 'brackets' },
  { value: '<', type: 'brackets' },
];
const KEYVALUEST = [
  { value: 'VW', type: 'unit' },
  { value: 'GW', type: 'unit' },
  { value: '←', type: 'back' },
  { value: 'C', type: 'clear' },
  { value: '7', type: 'number' },
  { value: '8', type: 'number' },
  { value: '9', type: 'number' },
  { value: '/', type: 'operator' },
  { value: '4', type: 'number' },
  { value: '5', type: 'number' },
  { value: '6', type: 'number' },
  { value: '*', type: 'operator' },
  { value: '1', type: 'number' },
  { value: '2', type: 'number' },
  { value: '3', type: 'number' },
  { value: '+', type: 'operator' },
  { value: '0', type: 'number' },
  { value: '.', type: 'point' },
  { value: '(', type: 'brackets' },
  { value: '-', type: 'operator' },
  { value: ')', type: 'brackets' },
  { value: '确定', type: 'equal' },
];

class FormulaExpression extends Component {
  state = {
    valueText: '0',
    equalFlag: false,
    errorFlag: false,
  };
  handleValueInput = data => {
    let oldState = this.state.valueText;
    let rev = this.checkClickType(oldState, data);
    this.setState({ valueText: rev });
  };

  getSpValue = str => {
    let newArr = [];
    let newStr = '';
    let strArr = str.split(' ');
    strArr.forEach(ele => {
      newArr.push(ele);
    });
    newStr = newArr.join(' ');
    return newStr;
  };
  checkClickType(oldvalue, data) {
    const { equalClick, maxLength } = this.props;
    const newData = oldvalue + data.value;
    if (!(data.type === 'back' || data.type === 'clear' || data.type === 'equal')) {
      if (newData.length > maxLength) {
        message.warning(`最多只能输入${maxLength}位`);
        return oldvalue;
      }
    }
    this.setState({ errorFlag: false });
    let initFlag = oldvalue === '0' && data.type !== 'point';
    switch (data.type) {
      case 'equal':
        let prevresult = this.getSpValue(oldvalue);
        equalClick(prevresult);
        return prevresult;
      case 'back':
        const lastTwo = oldvalue.substring(oldvalue.length - 2);
        if (lastTwo === 'VW' || lastTwo === 'GW' || lastTwo === '>=' || lastTwo === '<=') {
          return (oldvalue = oldvalue.substring(0, oldvalue.length - 2));
        }
        oldvalue = oldvalue.substring(0, oldvalue.length - 1);
        return oldvalue;
      case 'clear':
        oldvalue = '0';
        return oldvalue;
      case 'operator':
        return oldvalue + data.value;
      case 'brackets':
        return oldvalue + data.value;
      default:
        if (initFlag) {
          oldvalue = '';
        }
        if (data.value === '0') {
          let valueArr = oldvalue.split('');
          if (valueArr[valueArr.length - 1] === '/') {
            this.setState({ errorFlag: true });
            return '0';
          }
        }
        return oldvalue + data.value;
    }
  }

  initButtonList = (list, value) => {
    value.forEach((data, index) => {
      list.push(
        <Button
          shape="round"
          size="small"
          key={index}
          className={styles.calButton}
          onClick={() => this.handleValueInput(data)}
        >
          {data.value}
        </Button>
      );
    });
    return list;
  };

  render() {
    const { errorFlag, valueText } = this.state;
    const { isCondition = true } = this.props;
    if (errorFlag) {
      message.error('除数不能为零！', 10);
    }
    let buttonlist = [];
    let keyArray = isCondition ? [...KEYCOMPARE, ...KEYVALUEST] : [...KEYVALUEST];
    buttonlist = this.initButtonList(buttonlist, keyArray);
    const content = (
      <div>
        <p>1、VW代表体积重，GW代表实重</p>
        <p>2、设置计费规则时，不能省略操作符 "+", "-", "/", "*", "(", ")"</p>
        <p>&nbsp;&nbsp;例：5*VW > 2*GW</p>
        <p>&nbsp;&nbsp;例：5*( 2*VW + 0.3* GW )</p>
      </div>
    );
    return (
      <div className={styles.calculator}>
        <div className={styles.showdatabar}>
          <Row type="flex" justify="start">
            <Col span={22}>
              <Input type="text" value={valueText} readOnly />
            </Col>
            <Col span={2}>
              <Popover content={content} title="说明" trigger="hover">
                <Icon
                  type="question-circle"
                  style={{ fontSize: '20px', lineHeight: '30px', color: '#faad14' }}
                />
              </Popover>
            </Col>
          </Row>
        </div>
        <div className={styles.buttonlist}>{buttonlist}</div>
      </div>
    );
  }
}

export default FormulaExpression;
